<template>
	<view class="container">
		<view class="main">
			<view class="top_bg">
				<view class="name_bg">
					<view class="name"><text class="red">*</text>货物名称</view>
					<view class="right">
						<input v-model="name" class="input_name">
					</view>
				</view><!--name_bg end-->
				<view class="pack_bg">
					<view class="title_bg"><text class="star">*</text><text class="name">包装方式</text></view>
					<view class="content_bg">
						<view class="item" @click="selectPack(n)" v-for="n in packs" :class="n.id==sele_pack_id?'item_selected':''">{{n.name}}</view>
					</view>
				</view><!--pack_bg end-->
			</view><!--top_bg end-->
			<view class="center_bg">
				<view class="pack_bg">
					<view class="title_bg"><text class="star">*</text><text class="name">重量/体积（至少填写一顶）</text></view>
					<view class="content_bg">
						<view class="section">
							<view class="title">重量（吨）</view>
							<view class="num_bg">
								<input class="num" placeholder="约0-999" v-model="weight_start"/>
								<view  class="line">-</view>
								<input class="num" placeholder="约0-999" v-model="weight_end"/>
							</view>
						</view>
						<view class="section">
							<view class="title">体积（方）</view>
							<view class="num_bg">
								<input class="num" placeholder="约0-999" v-model="volumn_start"/>
								<view  class="line">-</view>
								<input class="num" placeholder="约0-999" v-model="volumn_end"/>
							</view>
						</view>
					</view>
				</view><!--pack_bg end-->
				
			</view><!--center_bg end-->
			<view class="bottom_bg">
				<view class="num_bg">
					<view class="title_bg"><text class="star">*</text><text class="name">需要车辆数</text></view>
					<view class="section">
						<view class="minus" @click="minusEvent()">-</view>
						<input  class="num" type="number" value="1" v-model="num"/>
						<view class="add" @click="addEvent()">+</view>
					</view>
				</view>
			</view><!--bottom_bg end-->
		</view><!--main end-->
		<view class="footer">
			<view class="submit-btn" @click="submitEvent()">完成</view>
		</view>
		
		<uni-popup ref="popinfo" class="popup-cls">
			<view class="pop-info">
				<view class="pop-top">
					货物信息
				</view>
				<view class="center"> 
					<view class="search_bg">
						<view class="search">
							<input class="input" v-model="keywords" placeholder="输入关键字" confirm-type="search" @confirm="searchGoods()"/>
							<image class="icon" src="/static/images/search.png"></image>
						</view>
					</view>
					<scroll-view class="pop-content" scroll-y="true">
						<view class="item" v-for="item in datas" @click="getGoodsPack(item)">
							<text class="name">{{item.name}}</text>
							<text class="category" v-if="item.parent!= null">{{item.parent!= null?item.parent.name:''}}</text>
						</view>
						<view class="desc">
							<text class="red">*</text>请勿发布及托运危险货物、违禁货物！
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {searchGoodsName,getGoodsPackWay,getGoodsPackWayDefault} from "@/api/logistic.js";
	export default {
		data() {
			return {
				keywords:'',
				datas:[],
				packs:[],//打包方式
				name:'',
				sele_pack_id:'',//选择的包装方式
				sele_pack_name:'',//选择的包装方式
				weight_start:'',//体重
				weight_end:'',//体重
				volumn_start:'',
				volumn_end:'',
				num:1
			}
		},
		onLoad(options) {
			this.loadGoodsPackWayDefault();
		},
		methods: {
			gotoTemplate(){
				uni.navigateTo({
					url:'/pages/news/publish/template/list'
				})
			},
			selectGoods(){
				this.$refs.popinfo.open('bottom');
			},
			//点击选择打包方式
			selectPack(item){
				this.sele_pack_id = item.id;
				this.sele_pack_name = item.name;
			},
			//获取默认打包方式
			loadGoodsPackWayDefault(){
				let that = this;
				uni.showLoading({
					title:'加载中...'
				});
				getGoodsPackWayDefault({}).then((res) => {
					let data = res.data;
					console.info(data);
					uni.hideLoading();
					that.packs = data;
				});
			},
			//获取物品打包方式
			getGoodsPack(item){
				let that = this;
				that.$refs.popinfo.close();
				that.goods_id = item.id;
				that.name = item.name;
				uni.showLoading({
					title:'加载中...'
				});
				getGoodsPackWay({goods_id:that.goods_id}).then((res) => {
					let data = res.data;
					console.info(data);
					uni.hideLoading();
					that.packs = data.list;
				});
			},
			//搜索物品
			searchGoods(){
				let that = this;
				uni.showLoading({
					title:'加载中...'
				});
				searchGoodsName({name:this.keywords.trim()}).then((res) => {
					let data = res.data;
					 console.info(data);
					 that.datas = data.list;
					uni.hideLoading();
				});
			},
			minusEvent(){
				if(this.num > 1){
					this.num--;
				}
			},
			addEvent(){
				this.num++;
			},
			//确认选择
			submitEvent(){
				let data = {
					name:this.name,
					wrap_way_id:this.sele_pack_id,
					wrap_way:this.sele_pack_name,
					weight_start:this.weight_start,
					weight_end:this.weight_end,
					volumn_start:this.volumn_start,
					volumn_end:this.volumn_end,
					num:this.num
				}
				
				console.info(data);
				let pages = getCurrentPages() ;
				let prevPage = pages[pages.length -2];
				prevPage.$vm.goods_data_receive(data) ;
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f2f2f2;
	}
	.container{
		display: flex;
		flex-direction: column;
		.main{
			display: flex;
			flex-direction: column;
			padding: 30rpx;
			padding-bottom: 0;  
			padding-bottom: constant(safe-area-inset-bottom);  
			padding-bottom: env(safe-area-inset-bottom); 
			margin-bottom: 100;
			.top_bg{
				margin-top: 20rpx;
				display: flex;
				flex-direction: column;
				background-color: white;
				padding: 30rpx 30rpx 10rpx 30rpx;
				.name_bg{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					.name{
						font-size: 28rpx;
						font-weight: bold;
						.red{
							color: red						
						}
					}
					.right{
						display: flex;
						flex-direction: row;
						align-items: center;
						margin-left: 30rpx;
						flex: 1;
						.input_name{
							flex: 1;
							font-size: 28rpx;
							color: black;
							background-color: #f2f2f2;
							height: 60rpx;
							padding: 0rpx 15rpx;
						}
					}
				}
				.pack_bg{
					margin-top: 40rpx;
					display: flex;
					flex-direction: column;
					.title_bg{
						display: flex;
						flex-direction: row;
						.star{
							font-size: 28rpx;
							color: red;
						}
						.name{
							font-size: 28rpx;
							color: black;
						}
					}
					.content_bg{
						margin-top: 20rpx;
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						flex-wrap: wrap;
						.item{
							width: 30%;
							background-color: #f2f2f2;
							color: black;
							text-align: center;
							height:70rpx;
							line-height: 70rpx;
							margin-bottom: 20rpx;
							border-radius: 10rpx;
							border: 1rpx solid #f2f2f2;
						}
						.item_selected{
							border: 1rpx solid orange;
							background-color: blanchedalmond;
							color: orange;
						}
					}
				}
			}//top_bg end
			.center_bg{
				margin-top: 20rpx;
				display: flex;
				flex-direction: column;
				background-color: white;
				padding: 30rpx 30rpx 10rpx 30rpx;
				.pack_bg{
					display: flex;
					flex-direction: column;
					.title_bg{
						display: flex;
						flex-direction: row;
						.star{
							font-size: 28rpx;
							color: red;
						}
						.name{
							font-size: 28rpx;
							color: black;
						}
					}
					.content_bg{
						margin-top: 30rpx;
						display: flex;
						flex-direction: column;
						.section{
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							align-items: center;
							margin-bottom: 30rpx;
							.title{
								font-size: 28rpx;
								color: black;
							}
							.num_bg{
								display: flex;
								flex-direction: row;
								align-items: center;
								.num{
									width: 150rpx;
									background-color: #f2f2f2;
									padding: 10rpx 15rpx;
									text-align: center;
									color: black;
									font-size: 28rpx;
								}
								.line{
									width: 50rpx;
									text-align: center;
								}
							}
						}
					}
				}
			}//center_bg end
			.bottom_bg{
				margin-top: 20rpx;
				display: flex;
				flex-direction: column;
				background-color: white;
				padding: 30rpx 30rpx 30rpx 30rpx;
				.num_bg{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					.title_bg{
						display: flex;
						flex-direction: row;
						.star{
							font-size: 28rpx;
							color: red;
						}
						.name{
							font-size: 28rpx;
							color: black;
						}
					}
					.section{
						display: flex;
						flex-direction: row;
						align-items: center;
						.minus{
							width: 70rpx;
							height: 70rpx;
							line-height: 70rpx;
							text-align: center;
							background-color: #f2f2f2;
							text-align: center;
						}
						.num{
							width: 80rpx;
							font-size: 28rpx;
							background-color: #f2f2f2;
							text-align: center;
							height:70rpx;
							margin-left: 5rpx;
							margin-right: 5rpx;
							padding: 0rpx 20rpx;
						}
						.add{
							width: 70rpx;
							height: 70rpx;
							line-height: 70rpx;
							text-align: center;
							background-color: #f2f2f2;
							text-align: center;
						}
					}
				}
			}
		}//main end
		
		.footer{
			height: 80rpx;
			width: 100%;
			position: fixed;
			right: 0;
			bottom: 0;
			left: 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			padding-bottom: 0;  
			padding-bottom: constant(safe-area-inset-bottom);  
			padding-bottom: env(safe-area-inset-bottom); 
			.submit-btn{
				background-color: $uni-main-color;
				color: white;
				font-size: 28rpx;
				height: 80rpx;
				width: 100%;
				text-align: center;
				line-height: 80rpx;
			}
		}//main end
		
		/** 须知弹窗 **/
		.popup-cls{
			display: flex;
			flex-direction: column;
			.pop-info{
				width:100%;
				display: flex;
				flex-direction: column;
				border-radius: 20rpx;
				margin: 0 auto;
				background-color: white;
				.pop-top{
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					align-items: center;
					font-size: 28rpx;
					color: #000000;
					font-weight: bold;
					margin-top: 20rpx;
					text-align: center;
					height: 40rpx;
				}
			}
			
			.center{
				margin-top: 30rpx;
				width:100%;
				padding: 0rpx 30rpx;
				display: flex;
				flex-direction: column;
				.search_bg{
					display: flex;
					flex-direction: row;
					.search{
						width: 100%;
						height: 80rpx;
						border-radius: 40rpx;
						border: 1rpx solid #A1A1A1;
						display: flex;
						flex-direction: row;
						align-items: center;
						.input{
							flex:1;
							font-size: 28rpx;
							color: black;
							height: 70rpx;
							margin-left: 30rpx;
						}
						.icon{
							width:60rpx;
							height:60rpx;
							margin-left: 20rpx;
							margin-right: 20rpx;
						}
					}
				}
				.pop-content{
					display: flex;
					flex-direction: column;
					height: 700rpx;
					margin-top: 30rpx;
					.item{
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						height: 80rpx;
						align-items: center;
						border-bottom: 1rpx solid #f2f2f2;
						.name{
							font-size: 28rpx;
							color: #000000;
						}
						.category{
							font-size: 28rpx;
							color: black;
							background-color: #f2f2f2;
							padding: 10rpx 20rpx;
						}
					}
					.desc{
						font-size: 28rpx;
						color: black;
						.red{
							color: red;
						}
					}
				}
			}
			
		}//popup-cls end
		
	}//container
	
	
</style>
